<div id="page-body">
  <div id='migration'>
    <p>
      Version 6 defaults to FA 5 icons (but will switch to FA 6 when that's released), removes moment, jQuery and
      Bootstrap as depedencies. It also uses Popper.js v2.
    </p>
    <p>
      This tool attempts to convert your configurations from previous version of the picker to v6. Paste your current
      configuration into the input box. Due to how this process works, it cannot convert usages of moment or date
      objects. Set any property that uses unsupported values to <code>undefined</code> so that configuration can still
      be converted.
    </p>
    <p>
      For more information on what's changed, check out the <a href='change-log.html'>change log</a>.
    </p>
    <p>
      If you find a bug or your configuration doesn't work, please open an issue.
    </p>
    <div id='alert'>
    </div>
    <nav>
      <div class='nav nav-tabs' id='nav-tab' role='tablist'>
        <button class='nav-link active' id='nav-migration-js-tab' data-bs-toggle='tab'
                data-bs-target='#nav-migration-js' type='button' role='tab' aria-controls='nav-migration-js'
                aria-selected='true'>JS
        </button>
        <button class='nav-link' id='nav-migration-html-tab' data-bs-toggle='tab' data-bs-target='#nav-migration-html'
                type='button' role='tab' aria-controls='nav-migration-html' aria-selected='false'>HTML
        </button>
      </div>
    </nav>
    <div class='tab-content' id='nav-tabContent'>
      <div class='tab-pane fade show active' id='nav-migration-js' role='tabpanel'
           aria-labelledby='nav-migration-js-tab'>
        <div class='row'>
          <div class='col'>
            <label for='from' class='form-label'>Input</label>
            <textarea id='from' class='form-control'></textarea>
          </div>
          <div class='col-sm-1'>
            <button class='btn btn-primary' id='convertButton'><i class="fa-solid fa-angle-double-right" aria-hidden="true"></i></button>
          </div>
          <div class='col'>
            <label for='to' class='form-label'>Output</label>
            <textarea id='to' class='form-control' readonly></textarea>
          </div>
        </div>
      </div>
      <div class='tab-pane fade' id='nav-migration-html' role='tabpanel' aria-labelledby='nav-migration-html-tab'>
        <div class='row'>
          <div class='col'>
            <label for='fromHtml' class='form-label'>Input</label>
            <textarea id='fromHtml' class='form-control'>
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
    </div>
</div>
            </textarea>
          </div>
          <div class='col-sm-1'>
            <button class='btn btn-primary' id='convertButtonHtml'><i class="fa-solid fa-angle-double-right" aria-hidden="true"></i></button>
          </div>
          <div class='col'>
            <label for='toHtml' class='form-label'>Output</label>
            <textarea id='toHtml' class='form-control' readonly></textarea>
          </div>
        </div>
      </div>
    </div>
    <div class='row mt-3'>
      <p>
        You can try your settings out here. If you're using an old version of FA or a differnt icon family, the icons
        won't show.
      </p>
      <p>
        <button class='btn btn-primary' id='tryIt'>Try it</button>
      </p>
      <div class='col-sm-6'>
        <label for='datetimepicker1Input' class='form-label'>Results</label>
        <div
          class='input-group'
          id='datetimepicker1'
          data-td-target-input='nearest'
          data-td-target-toggle='nearest'
        >
          <input
            id='datetimepicker1Input'
            type='text'
            class='form-control'
            data-td-target='#datetimepicker1'
          />
          <span
            class='input-group-text'
            data-td-target='#datetimepicker1'
            data-td-toggle='datetimepicker'
          >
               <span class='fas fa-calendar'></span>
             </span>
        </div>
      </div>
    </div>
    <div class='row mt-3'>
      <h3>Exception 1</h3>
      <p>
        Moment is no longer used or an accepted value for configurations. You can either change the config to use the
        value of <code>undefined</code> or remove the configuration. There's just no way I could convert
        every possible way to use moment into something that works for the new version.
      </p>
      <h3>Exception 2</h3>
      <p>
        The current process doesn't work well with functions or object initalizers. You will have to replace those
        calls. If you have a suggestions on how to improve this, please let me know.
      </p>
    </div>
  </div>
</div>
<div id="page-meta">
  <div id="title">Migration</div>
  <div id="post-date">07/08/2021</div>
  <div id="update-date">07/08/2021</div>
  <div id="excerpt">How to use Tempus Dominus datetime picker</div>
  <div id="tags">datepicker, javascript, open source, tempus dominus, eonasdan</div>
</div>
